<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>			
		<title></title>
	</head>
	<body>
		<div id="app">
			<div style="margin-left: 45%;margin-top: 200px;">
			    <i-button @click="modal3 = true">好友申请</i-button>
			    <modal v-model="modal3" width="350" ok-text="同意" cancel-text="拒绝" @on-ok="passFriendApplyBtn" @on-cancel="rejectFriendApplyBtn" >
					<div id="addModal"></div>
			    </modal>
			    <i-button @click="modal4 = true">同意通知</i-button>
			    <modal v-model="modal4" width="350" ok-text="我知道了"  @on-ok="passFriendApplyBtn" @on-cancel="rejectFriendApplyBtn">
					<p>xxxxxx同意加你为好友</p>
			    </modal>
			    <i-button @click="modal5 = true">拒绝通知</i-button>
			    <modal v-model="modal5" width="350" ok-text="不加拉到"  @on-ok="passFriendApplyBtn" @on-cancel="rejectFriendApplyBtn">
					<p>xxxxxx拒绝加你为好友</p>
			    </modal>	
			    <i-button @click="addNotice">添加</i-button>
			    <i-button @click="addModal">添加</i-button>
			</div>
			
			<div id="noticesList" style="width: 200px; height: 300px; background-color: #ABDCFF; position: absolute; margin-top: -200px; margin-left: -20px; overflow-y: scroll; border-radius: 5px;">
				<i-button style="width: 100%;">好友申请</i-button>
				<i-button style="width: 100%;">同意申请</i-button>
				<i-button style="width: 100%;">拒绝申请</i-button>
				
			</div>
		</div>
	</body>
	<script src="js/jquery.js"></script>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				modal3: false,
				modal4: false,
				modal5: false
			},
			methods: {
				passFriendApplyBtn() {
					
				},
				rejectFriendApplyBtn() {
					
				},
				addNotice() {
					let  makeApplyFriendNoticeHtml = "<button style='width: 100%; height: 30px;'>好友申请</button>"
					$('#noticesList').append(makeApplyFriendNoticeHtml);		
				},
				addModal() {
					let html = "<p>卧槽</p>";
					$("#addModal").append(html);
				}
			}
		})
	</script>
	<script>
		
	</script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>			
</html>
